import React, { Fragment, useState, useEffect, useReducer } from 'react';
import {
  Card,
  // Modal,
  // notification
} from 'antd';
import Link from 'umi/link';
import MyForm from './components/MyForm';
import ApplyModal from './components/ApplyModal';
import Paymodal from './components/Paymodal';
import TableList from './components/TableList';
import { SIZE, PAGE } from '@/utils/constant';
import { studentsList } from '@/services/api';

interface initial {
  loading: boolean;
  data: [];
  pagination: object;
  searchValue: object;
}

const initialState: initial = {
  loading: false,
  data: [],
  pagination: {
    showSizeChanger: true,
  },
  searchValue: {},
};

const reducer = (state: any, { type, payload }: any) => {
  switch (type) {
    case 'OPEN_LOADING':
      return {
        ...state,
        loading: true,
      };
    case 'CLOSED_LOADING':
      return {
        ...state,
        loading: false,
      };
    case 'GET_DATA':
      return {
        ...state,
        data: payload,
      };
    case 'CHANGE_PAGINATION':
      return {
        ...state,
        pagination: payload,
      };
    case 'SEARCH_VALUE':
      return {
        ...state,
        searchValue: payload,
      };
    default:
      return state;
  }
};

function ApplyList() {
  const [addModal, setAddModal] = useState(false);
  const [payModal, setPayModal] = useState(false);
  const [{ loading, data, pagination, searchValue }, dispatch]: any = useReducer(
    reducer,
    initialState,
  );
  const pager = JSON.parse(JSON.stringify(pagination));
  useEffect(() => {
    dispatch({
      type: 'OPEN_LOADING',
    });
    studentsList({ page: PAGE, size: SIZE })
      .then((res: any) => {
        if (res.status === 'success') {
          dispatch({
            type: 'GET_DATA',
            payload: res.data.data,
          });
          dispatch({
            type: 'CHANGE_PAGINATION',
            payload: {
              ...pager,
              total: res.data.meta.total,
            },
          });
        }
        dispatch({
          type: 'CLOSED_LOADING',
        });
      })
      .catch(() => {
        dispatch({
          type: 'CLOSED_LOADING',
        });
      });
  }, []);

  const onChange = (changePagination: any) => {
    pager.current = changePagination.current;
    pager.pageSize = changePagination.pageSize;
    dispatch({
      type: 'CHANGE_PAGINATION',
      payload: pager,
    });
    dispatch({
      type: 'OPEN_LOADING',
    });
    studentsList({
      ...searchValue,
      page: changePagination.current,
      size: changePagination.pageSize,
    })
      .then((res: any) => {
        if (res.status === 'success') {
          dispatch({
            type: 'GET_DATA',
            payload: res.data.data,
          });
          dispatch({
            type: 'CHANGE_PAGINATION',
            payload: {
              ...pager,
              total: res.data.meta.total,
            },
          });
        }
        dispatch({
          type: 'CLOSED_LOADING',
        });
      })
      .catch(() => {
        dispatch({
          type: 'CLOSED_LOADING',
        });
      });
  };

  const columns = [
    {
      title: '名字',
      key: 'name',
      dataIndex: 'name',
    },
    {
      title: '是否交学费',
      key: 'is_paid',
      dataIndex: 'is_paid',
      render: (text: any) => (text ? <span>已交</span> : <span>未交</span>),
    },
    {
      title: '应缴学费',
      key: 'money',
      dataIndex: 'money',
      render: (text: any) => <span>{text / 100}元</span>,
    },
    {
      title: '实缴学费',
      key: 'paid',
      dataIndex: 'paid',
      render: (text: any) => <span>{text / 100 || 0}元</span>,
    },
    {
      title: '家长',
      key: 'parent',
      dataIndex: 'parent',
      render: (text: any) => text && <span>{text.name}</span>,
    },
    {
      title: '老师',
      key: 'teacher',
      dataIndex: 'teacher',
      render: (text: any) => text && <span>{text.name}</span>,
    },
    {
      title: '班级',
      key: 'clase',
      dataIndex: 'clase',
      render: (text: any) => text && <span>{text.name}</span>,
    },
    {
      title: '操作',
      width: 300,
      key: 'option',
      valueType: 'option',
      dataIndex: 'id',
      render: (text: any, object: any) => (
        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
          <Link to={`/money/list/${text}`}>查看缴费详情</Link>
          <a
            onClick={e => {
              e.preventDefault();
              setPayModal(true);
              sessionStorage.setItem('payData', JSON.stringify(object));
            }}
          >
            缴费录入
          </a>
          <a
            onClick={e => {
              e.preventDefault();
              setAddModal(true);
              sessionStorage.setItem('studentsData', JSON.stringify(object));
            }}
          >
            修改应缴费用
          </a>
        </div>
      ),
    },
  ];

  return (
    <Fragment>
      <Card title="缴费列表">
        <MyForm dispatch={dispatch} />
      </Card>
      <Card className="pageCard">
        <TableList
          rowKey="id"
          dataSource={data}
          columns={columns}
          loading={loading}
          pagination={pagination}
          onChange={onChange}
        />
      </Card>
      {payModal && (
        <Paymodal
          dispatch={dispatch}
          onClose={() => {
            setPayModal(false);
          }}
        />
      )}
      {addModal && (
        <ApplyModal
          dispatch={dispatch}
          onClose={() => {
            setAddModal(false);
          }}
        />
      )}
    </Fragment>
  );
}

export default ApplyList;
